<template>
  <div style="margin-top: 60px" id="printTest" ref="print">
    <!-- <build-el-bread :text="$route.query.name"></build-el-bread> -->
    <div class="newDetails-box" v-loading="loading">
      <div style="margin: 0 auto">
        <div class="news-title-box">
          <div class="title">{{ newDetails.title }}</div>
          <div class="time">
            <span>
              时间：{{ newDetails.updateTime }} 来源：{{ newDetails.subhead }}
            </span>
          </div>
        </div>
        <div class="fwb-800" v-html="newDetails.content"></div>
      </div>
    </div>
    <div class="up_dow">
      <el-button
        :loading="loading"
        type="primary"
        size="default"
        @click="handUpDow(1)"
        style="margin-right: 40px"
        >上一篇</el-button
      >
      <el-button
        :loading="loading"
        type="primary"
        size="default"
        @click="handUpDow(0)"
        >下一篇</el-button
      >
    </div>
    <ShareBtn
      ref="shareBtn"
      @handBtn="handBtn"
      :favoritesId="newDetails.favoritesId"
      :scShow="true"
      :isPrint="true"
    ></ShareBtn>
  </div>
</template>
<script>
import buildElH1 from "../build-el-h1";
import buildElTimeList from "../build-el-time-list";
import buildElTimeRight from "../build-el-time-right";
import buildElBread from "@/components/build-el-bread";
import ShareBtn from "@/components/ShareBtn/index.vue";
export default {
  components: {
    buildElH1,
    buildElTimeList,
    buildElTimeRight,
    buildElBread,
    ShareBtn,
  },
  data() {
    return {
      loading: false,
      tableData: [],
      newDetails: {},
      newsIds: [],
      newsId: "",
    };
  },
  async created() {
    this.newsId = this.$route.query.id;
    this.init();
    this.initId();
    if (this.$route.query.name == "城市公益巡讲") {
    }
  },
  methods: {
    handUpDow(type) {
      if (type === 1) {
        this.handUp();
      } else {
        this.handDow();
      }
    },
    async initId(page) {
      let apiName = "";

      switch (this.$route.query.name) {
        case "大赛报道":
          this.$route.meta.active = "/report";
          apiName = "selectNewsList7";
          break;
        case "往期回顾":
          this.$route.meta.active = "/review";
          apiName = "selectNewsList8";
          break;
        case "城市公益巡讲":
          this.$route.meta.active = "/tour";
          // this.$route.meta.active = '/vote';
          apiName = "selectNewsList";
          break;
        case "往届精彩回顾":
          this.$route.meta.active = "/review";
          apiName = "selectNewsList8";
          break;

        default:
          break;
      }
      let tableData = await this.api[apiName](1, 10000);
      this.newsIds = tableData.list.map((item) => item.newsId);
    },
    async handDow() {
      const index = this.newsIds.findIndex((item) => item == this.newsId);
      this.newsId = this.newsIds[index + 1] || this.newsIds[0];
      await this.init();
      window.scrollTo(0, 600);
    },
    async handUp() {
      const index = this.newsIds.findIndex((item) => item == this.newsId);
      this.newsId =
        this.newsIds[index - 1] || this.newsIds[this.newsIds.length - 1];
      await this.init();
      window.scrollTo(0, 600);
    },
    async init() {
      this.loading = true;
      let res = await this.api.selectNewsFIRST({
        newsId: this.newsId,
      });
      this.loading = false;
      this.newDetails = res;
    },
    async handBtn(nav) {
      if (nav == "dy") {
        this.$print(this.$refs.print);
      }
      if (nav == "sc") {
        let res = await this.api.addMyFavorites({
          newsId: this.newDetails.newsId,
        });
        this.init();
        if (res == 1) {
          this.$message({
            message: "收藏成功!",
            type: "success",
          });
        } else {
          this.$message({
            message: "取消收藏!",
            type: "success",
          });
        }

        // this.$refs.shareBtn.show3 = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.up_dow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  margin-top: 15px;
}
.newDetails-box {
  width: 1200px;
  margin: 0 auto;

  text-align: left;
  padding: 60px 30px;
  // padding-bottom: 50px;
  box-sizing: border-box;

  border-radius: 6px;
  background-color: #fff;

  img {
    width: 100%;
  }
  .news-title-box {
    .time {
      margin-bottom: 50px;
      border-bottom: 1px solid #ededed;
      color: #666;
      font-size: 14px;
      padding-bottom: 14px;
      box-sizing: border-box;
    }
    .title {
      .text-ell;
      font-weight: bold;
      font-size: 30px;
      color: #333;
      margin-bottom: 32px;
    }
  }
}
</style>
